<template>
  <el-card class="hot">
    <div slot="header" class="hot-header">
      <span>线上热门搜索</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>爆炒鸡丁</el-dropdown-item>
          <el-dropdown-item>香辣鸡杂</el-dropdown-item>
          <el-dropdown-item>红烧茄子</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-row :gutter="30">
      <el-col :span="12"><HotChart :showData="searchUserCount"/></el-col>
      <el-col :span="12"><HotChart :showData="averageUserCount"/></el-col>
    </el-row>
    <el-table
      class="hot-table"
      :data="searchPageData"
      :header-cell-style="{ backgroundColor: '#FAFAFA', lineHeight: '30px' }"
    >
      <el-table-column label="排名" type="index" width="100"></el-table-column>
      <el-table-column
        label="搜索关键词"
        prop="word"
        width="200"
      ></el-table-column>
      <el-table-column label="用户数" prop="user" sortable></el-table-column>
      <el-table-column label="周涨幅" prop="count" sortable></el-table-column>
    </el-table>
    <el-pagination
      class="hot-pagination"
      layout="prev,pager,next"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
import HotChart from './hotChart'
import { mapState } from 'vuex'
export default {
  name: 'Hot',
  data() {
    return {
      searchUserCount: {
        title: '搜索用户数',
        count: 12391,
        percent: 13.1,
        chartData: [20, 190, 100, 300, 200, 400, 20, 190, 100, 300, 200, 400]
      },
      averageUserCount: {
        title: '人均搜索次数',
        count: 13.5,
        percent: -59.1,
        chartData: [120, 90, 200, 300, 200, 400, 220, 90, 120, 300, 200, 111]
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      searchKeyWord: []
    }
  },
  components: {
    HotChart
  },
  computed: {
    ...mapState({
      searchWord: state => state.home.homeData.searchWord
    }),
    searchPageData() {
      const { currentPage, searchKeyWord } = this
      return searchKeyWord.length
        ? searchKeyWord.slice((currentPage - 1) * 5, currentPage * 5)
        : []
    }
  },
  watch: {
    searchWord(val) {
      this.searchKeyWord = val
      this.total = val.length
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style lang="sass">
.hot-header
  display: flex
  justify-content: space-between
.hot-pagination
  margin-top: 20px
  margin-bottom: 20px
  float: right
.charts
  width: 100%
  height: 300px

.hot-table
  margin-top: 20px
  height: 295px
</style>
